<template>
  <el-card>
    <!-- 店铺管理 -->
    <template #header>店铺管理</template>
    <!-- 内容 -->
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="店铺名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="公告">
        <el-input type="textarea" v-model="form.bulletin"></el-input>
      </el-form-item>
      <el-form-item label="店铺头像">
        <el-upload
          class="avatar-uploader"
          action="http://127.0.0.1:5000/shop/upload/"
          :show-file-list="false"
          v-model="form.avatar"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="店铺图片">
        <el-upload
          action="http://127.0.0.1:5000/shop/upload/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handlePicsSuccess"
          :on-remove="handleRemove"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="配送费">
        <el-input v-model="form.deliveryPrice"></el-input>
      </el-form-item>
      <el-form-item label="配送时间">
        <el-input v-model="form.deliveryTime"></el-input>
      </el-form-item>
      <el-form-item label="配送描述">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="配送评价">
        <el-input v-model="form.score"></el-input>
      </el-form-item>
      <el-form-item label="销量">
        <el-input v-model="form.sellCount"></el-input>
      </el-form-item>
      <el-form-item label="活动">
        <el-checkbox-group v-model="form.supports">
          <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
          <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
          <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
          <el-checkbox label="特价饮品八折抢购" name="type"></el-checkbox>
          <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="营业时间">
        <el-time-picker
          is-range
          v-model="form.date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')"
          >立即创建</el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { info, editshop } from '../../api/list'
import _ from 'lodash'
export default {
  data() {
    return {
      dialogImageUrl: [],
      dialogVisible: false,
      imageUrl: '',
      fileList: [],
      form: {
        id: '',
        name: '',
        bulletin: '',
        deliveryPrice: '',
        deliveryTime: '',
        description: '',
        score: '',
        sellCount: '',
        avatar: '',
        supports: [],
        date: [],
        pics: []
      },
      rules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' }],
        bulletin: [{ required: true, message: '不能为空', trigger: 'blur' }],
        avatar: [{ required: true, message: '不能为空', trigger: 'chage' }],
        deliveryPrice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        deliveryTime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        description: [{ required: true, message: '不能为空', trigger: 'blur' }],
        score: [{ required: true, message: '不能为空', trigger: 'blur' }],
        sellCount: [{ required: true, message: '不能为空', trigger: 'blur' }],
        supports: [{ required: true, message: '不能为空', trigger: 'chage' }],
        date: [{ required: true, message: '不能为空', trigger: 'chage' }]
      }
    }
  },
  created() {
    this.shopInfo()
  },
  methods: {
    /* 渲染 */
    async shopInfo() {
      const { data } = await info()
      // 将数据给v-model
      this.form = {
        id: data.id,
        name: data.name,
        bulletin: data.bulletin,
        deliveryPrice: data.deliveryPrice,
        deliveryTime: data.deliveryTime,
        description: data.description,
        score: data.score,
        sellCount: data.sellCount,
        supports: data.supports,
        date: data.date,
        pics: data.pics,
        avatar: data.avatar
      }
      // 店铺头像
      this.imageUrl = 'http://127.0.0.1:5000/upload/shop/' + data.avatar
      // 预览店铺图片
      this.fileList = []
      data.pics.forEach(item => {
        this.fileList.push({
          name: item,
          url: 'http://127.0.0.1:5000/upload/shop/' + item
        })
      })
    },

    // 下面都是图片的格式
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.avatar = res.imgUrl
    },
    handlePicsSuccess(res, file) {
      /* 上传成功服务器后，将图片给这个数组 */
      // console.log(res.imgUrl)
      this.form.pics.push(res.imgUrl)
    },
    handleRemove(file, fileList) {
      /* 删除图片 */
      console.log(file, fileList)
      // 如果在删除图片中有它的名字和你的地址一样返回它的索引
      const i = this.form.pics.findIndex(item => item === file.name)
      this.form.pics.splice(i, 1)
    },
    /* 修改，编辑 */
    submitForm(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
          // 克隆
          const obj = _.cloneDeep(this.form)
          obj.supports = JSON.stringify(obj.supports)
          obj.date = JSON.stringify(obj.date)
          obj.pics = JSON.stringify(obj.pics)

          const data = await editshop(obj)
          // console.log(data)
          if (data.code === 0) {
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-upload {
  border: 1px solid #ccc;
  width: 148px;
  height: 148px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-input {
  width: 300px;
}
/deep/.el-textarea {
  width: 300px;
}
</style>
